<template>
	<view class="advice-content">
		<view class="pop-main">
			<view class="close-icon" @click="handleClosePage"></view>
			<view class="pop-img"></view>
			<view class="footer-box">
				<u-button class='btn-style' @click="handleNext">分享链接</u-button>
				<u-button class='btn-style' @click="handleNext">保存图片</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	const state = reactive({});

	const checked = reactive(true);

	function handleClosePage() {
		uni.navigateBack({
			delta: 1
		});

	}
</script>

<style scoped lang="less">
	page {
		background-color: #f2f4f7;
	}

	.pop-main {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: rgba(102, 102, 102, .6);
	}

	.close-icon {
		position: absolute;
		top: 11vh;
		right: 74rpx;
		width: 52rpx;
		height: 52rpx;
		background: url("/static/imgs/close-grey.png");
		background-size: 52rpx 52rpx;
	}

	.pop-img {
		position: absolute;
		top: 17vh;
		left: 78rpx;
		width: 598rpx;
		height: 1072rpx;
		background: url("/static/imgs/advice-placard.png");
		background-size: 598rpx 1072rpx;
	}

	.footer-box {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 89vh;
		width: calc(100% - 134rpx);
		height: 86rpx;
		display: flex;

		.btn-style {
			border-radius: 43rpx;

			&:first-child {
				margin-right: 30rpx;
				background-color: #476ffe;
				color: #fff;
			}

			&:last-child {
				margin-right: 30rpx;
				background-color: #ffffff;
				color: #476ffe;
			}
		}
	}

	::v-deep .u-button--info {
		border-color: transparent;
	}
</style>